import React from 'react';
import ReactBootstrap4,{
    Container,
    Input,
    Button,
    CCheckbox,
    Table,
    Pagination,
    Dropdown,
    Select,
    Calendar,
    TextArea,
    Switch,
    Label,
    TabsContent,
    Tabs,
    Box,
	Radio,
	RadioGroup,
	Common,
} from '@clake/react-bootstrap4';
import {
    CTable,
	Window,
	WModal
} from '@clake/react-bootstrap4-window';
import Form from '../../common/Form';
import {GetData,ComboSearch} from '../../common/DataService';
class FEfcReleaseQuery extends React.Component {
    constructor(props) {
        super(props);
        this.id = 'f_efc_release_query';
		this.title = 'Query Release Log';
        if (!this.props.width) {
            this.width = '816px';
        }
        if (!this.props.height) {
            this.height = '536px';
        }
		this.source = 'v_efc_release_query_general';
		if (this.props.parent instanceof Window) {
            //window 窗体对像
            this.window = this.props.parent;
            //window 管理对像
            this.manage = this.window.parent;
            //传送的窗体参数
            this.params = this.window.params;
        }

		this.order = [];
		this.filter = [];
		this.state = {
			data:{},
            tableData:[],
            page:1,
            dataCount:0
		};
    }

    componentDidMount() {
		this.window.on(Window.EVT_SHOW,this.showHandler);
        this.window.on(Window.EVT_CLOSE,this.closeHandler);
		this.getData(1);
    }

    showHandler = ()=>{
        this.getData(1);
    };

    closeHandler = ()=>{
        
    };

	getData = (page=1) => {
        this.modal.loading('Loading...');
        GetData('v_efc_release_query_general',page,50, this.getCondition(),this.order,(res)=>{
            this.modal.close();
            if (res.status) {
                this.setState({
                    tableData:res.data.list||[],
                    page:page,
                    dataCount:res.data.count
                });
            } else {
                this.setState({
                    tableData:[]
                });
            }
        });
    };

    getCondition() {
        let list = [];
        Common.map(this.state.data,(item,field)=>{
            let val;
            if (typeof item ==='object') {
                val = item.value + '';
            } else {
                val = item + '';
            }
            if (val) {
                list.push({
                    field:field,
                    value:val,
                    flag:'like'
                });
            }
        });
        return list.concat(this.filter);
    }

    clearCondition = () => {
        this.order = [];
        this.filter = [];
        this.queryTable.clearSort();
        this.setState({data:this.form.getNew()});
    };

	fieldChangeHandler = (field,val,row,type)=>{
		let data = this.state.data;
		if (type==='combo') {
		    data[field] = {
		        text:val,
                value:row?row[field]:''
            };
        } else {
            data[field] = val;
        }
		this.setState({data:data});
	};

	sortHandler = (field,sort_type)=>{
	    this.order = [{
            field:field,
            type:sort_type,
        }];
	    this.getData(1);
    };

    filterHandler = (text,field,type)=> {
        switch (type) {
            case "start":
                this.filter.push({
                    field:field,
                    value:`${text}%`,
                    flag:'like'
                });
                break;
            case "end":
                this.filter.push({
                    field:field,
                    value:`%${text}`,
                    flag:'like'
                });
                break;
            case "clear":
                this.filter = [];
                break;
            default:
                this.filter.push({
                    field:field,
                    value:`%${text}%`,
                    flag:'like'
                });
        }
        this.getData(1);
    };

	open(formName,field){
        return (row)=> {
            this.manage.open(formName,{id:row[field],refresh:this.getData});
        }
    };

    render() {
        return (
            <Form ref={c=>this.form=c} onChange={this.fieldChangeHandler}>
                <CTable jsxId={'sub_efc_release_query_general'} absolute={true} x={'20px'} y={'76px'} width={'776px'} height={'440px'} scroll={true} headerTheme={'light'} hover={true} select={false} sm={true} fontSm={true} source={'v_efc_release_query_general'} data={this.state.tableData} ref={c=>this.queryTable=c} page={this.state.page} dataCount={this.state.dataCount} onSelectPage={this.getData} showNumbers={50} onFilter={this.filterHandler} onSort={this.sortHandler}>
                    <Table.Header field={'efc_release_id'} text={'Seq No.'} width={'60px'} align={'center'} onFormat={val=><u className='text-primary print-default'>{val}</u>} onDoubleClick={this.open('f_efc_release_new','efc_release_id')}/>
                    <Table.Header field={'status_desc'} text={'Status'} width={'80px'} align={'left'}/>
                    <Table.Header field={'efc_release_no'} text={'Release No.'} width={'92px'} align={'left'}/>
                    <Table.Header field={'sub_version_no'} text={'Sub Version'} width={'72px'} align={'center'}/>
                    <Table.Header field={'est_release_date'} text={'Rrelease Date'} width={'84px'} align={'center'} onFormat={val=>val?moment(val).format('MM-DD-YYYY'):''}/>
                    <Table.Header field={'release_note'} text={'Release Note'} width={'284px'} align={'left'}/>
                    <Table.Header field={'created_by_code'} text={'Created By'} width={'72px'} align={'left'}/>
                    <Table.Header field={'created_date'} text={'Created Date'} width={'88px'} align={'center'} onFormat={val=>val?moment(val).format('MM-DD-YYYY'):''}/>
                    <Table.Header field={'modified_by_code'} text={'Modified By'} width={'72px'} align={'left'}/>
                    <Table.Header field={'modified_date'} text={'Modified Date'} width={'84px'} align={'center'} onFormat={val=>val?moment(val).format('MM-DD-YYYY'):''}/>
                </CTable>
                <Input jsxId={'status_id'} field={{key:'status_id',text_key:'status_desc'}} size={'xs'} absolute={true} x={'100px'} y={'40px'} width={'92px'} align={'left'} combo={{
                    onSearch:ComboSearch('status_desc','q_efc_release_tb_status'),
                    searchColumn:'status_desc',
                    width:'92px',
                    header:false,
                    filterColumns:[
                        {field:'status_desc',width:'75px'}
                    ]
                }} data={this.state.data?.status_id?.text}/>
                <Label jsxId={'lbl_status_id'} sm={true} absolute={true} x={'20px'} y={'40px'} width={'72px'} height={'20px'} align={'left'} color={'rgb(0,0,0)'} text={'Status'}/>
                <Box jsxId={'Boxheadline'} absolute={true} x={'0px'} y={'0px'} width={'816px'} height={'28px'} backColor={'rgb(53,88,117)'} borderColor={'rgb(0,0,0)'} borderWidth={'1px'}/>
                <Button jsxId={'btn0Query'} absolute={true} size={'xs'} x={'2px'} y={'2px'} width={'48px'} height={'24px'} outline={true} theme={'light'} onClick={e=>this.getData(1)}>
                    Query
                </Button>
                <Button jsxId={'btn0Clear'} absolute={true} size={'xs'} x={'51px'} y={'2px'} width={'48px'} height={'24px'} outline={true} theme={'light'} onClick={this.clearCondition}>
                    Clear
                </Button>
				<WModal ref={c=>this.modal=c}/>
            </Form>
        );
    }
}

export default FEfcReleaseQuery;
